<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .center-table {
    margin-left: auto;
    margin-right: auto;
    border-spacing: 300px 5px;
    text-align: left;
  }
  body{
    background-color: #949292;
    color: white;
  }
  a{
    color: #8a1515;
    text-decoration: none;
  }
</style>
<body>
    <h3>题目列表</h3><br><br>
    <table class="center-table">
      <thead>
          <tr>
            <th>题号</th>
            <th>题目名称</th>
            <th>难度</th>
          </tr>
      </thead>
      <tbody id = "problemTable">
      </tbody>


    </table>
    <script>
        function getProblems(){
            console.log('jjj')
            // $是特殊变量，各种API都是通过其调用
            $.ajax({
                url:"problem/getAll",
                type:"GET",
                success:function (data,status){
                    //data是响应的body,status是响应码
                    makeProblemTable(data);
                }
            })
        }

        function makeProblemTable(data){
            console.log(data)
            let problemTable = document.querySelector("#problemTable");
            for(let problem of data){
                let tr = document.createElement("tr");
                let tdId = document.createElement("td");
                tdId.innerHTML = problem.id;
                tr.appendChild(tdId)

                let tdTitle = document.createElement("td");
                let a = document.createElement("a");
                a.innerHTML = problem.title;
                a.href = 'problemDetail.html?id='+problem.id;
                a.target = '_blank';
                tdTitle.appendChild(a);
                tr.appendChild(tdTitle)

                let tdLevel = document.createElement("td");
                tdLevel.innerHTML = problem.level;
                tr.appendChild(tdLevel);
                problemTable.appendChild(tr);
            }
        }

        getProblems();
    </script>

</body>



</html>